<template>
    <el-drawer title="模版查看" :visible.sync="visible" :with-header="false" size="650px" :close-on-press-escape="false"  :wrapperClosable="false">
        <div class="right-container">
            <div class="container-header">
                <div style="font-size: 14px">通知内容查看</div>
                <div @click="handleClose">
                    <i class="el-icon-close" style="font-size: 18px"></i>
                </div>
            </div>
            <div class="container-content background-color-grey padding-10">
                <div class="bg-white border-radius">

                    <div class="padding-lg">
                        <el-form :model="dataForm" ref="dataForm"  label-width="80px">

                            <el-form-item label="通知内容" prop="content" style="margin-bottom: 0;" :rules="{required:true,message:'请输入模版内容',trigger: 'blur'}">
                            </el-form-item>

<!--                            <el-form-item label="" prop="" label-width="15px">-->
<!--                                <div id='quillEditorQiniu'>-->
<!--                                    &lt;!&ndash; 基于elementUi的上传组件 el-upload begin&ndash;&gt;-->
<!--                                    <el-upload style="height: 0;" class="avatar-uploader" :action="uploadImgUrl"-->
<!--                                        :accept="'image/*,video/*'" :show-file-list="false"-->
<!--                                        :on-success="uploadEditorSuccess" :on-error="uploadEditorError"-->
<!--                                        :before-upload="beforeEditorUpload">-->
<!--                                    </el-upload>-->
<!--                                    &lt;!&ndash; 基于elementUi的上传组件 el-upload end&ndash;&gt;-->
<!--                                    <quill-editor class="editor" v-model="content" ref="customQuillEditor"-->
<!--                                        :options="editorOption">-->
<!--                                    </quill-editor>-->
<!--                                </div>-->
<!--                            </el-form-item>-->


                          <el-input
                            type="textarea"
                            :autosize="{ minRows: 10, maxRows: 30}"
                            placeholder="请输入内容"
                            v-model="content">
                          </el-input>


                            <el-form-item label="状态" size="mini" prop="state">
                                <el-radio-group v-model="dataForm.state">
                                    <el-radio :label=1>启用</el-radio>
                                    <el-radio :label=0>停用</el-radio>
                                </el-radio-group>
                            </el-form-item>

<!--                            <el-form-item label="排序" prop="sort">-->
<!--                                <div class="flex">-->
<!--                                    <el-input style="width: 100px" v-model="dataForm.sort" placeholder=""></el-input>-->
<!--                                    <div class="margin-left-sm text-gray">数字越大，排列靠前</div>-->
<!--                                </div>-->
<!--                            </el-form-item>-->



                        </el-form>

                    </div>


                </div>
            </div>
            <div class="flex justify-center padding-10">
                <el-button type="default" @click="handleClose">返回</el-button>

                <el-button type="primary" @click="dataFormSubmit">保存</el-button>
              </div>
        </div>
    </el-drawer>


</template>

<script>

import { quillEditor, Quill } from 'vue-quill-editor'

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import Video from '@/utils/video'
Quill.register(Video, true)
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

//实现quill-editor编辑器调整图片尺寸
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
//自定义编辑器的工作条
//   import {getToken} from "@/utils/auth";

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
];
export default {
    data() {
        return {
            dataForm: {
                id: "",
                name: "",
                templateNumber:"",

                state:1
            },
            visible: false,
            // headers: {
            //   Authorization: "Bearer " + getToken(),
            // },
            uploadImgUrl: "https://apiysxh.cnslpa.com/api/class/danTemplate/aliOss/upload",
            uploadUrlPath: "没有文件上传",
            quillUpdateImg: false,
            content: '',    //最终保存的内容
            editorOption: {
                placeholder: '你想说什么？',
                modules: {
                    // imageDrop: true,      //图片拖拽
                    imageResize: {
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white'
                        },
                        modules: ['Resize', 'DisplaySize', 'Toolbar']
                    },
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            },
                            'video': function (value) {
                                if (value) {
                                    document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                                } else {
                                    this.quill.format('video', false);
                                }
                            },
                        }
                    }
                }
            },
        }
    },
    methods: {
        dataFormSubmit(){
            this.dataForm.content = this.content
            //验证必填，名称和内容

            if (!this.dataForm.content) {
                this.$message.error('内容不能为空')
                return
            }

            console.log(this.dataForm)
            //保存/class/danTemplate/save
            this.$http({
                url: this.$http.adornUrl(`/class/msg/${!this.dataForm.id ? 'save' : 'update'}`),
                method: 'post',
                data: this.$http.adornData(this.dataForm)
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.handleClose()
                            this.$emit('refreshDataList')
                        }
                    })
                }
            })


        },

        initDataForm(){
            this.dataForm={
                id: "",
                name: "",
                templateNumber:"",
                sort:1,
                state:1
            }
        },
        handleClose() {
            this.initDataForm();

            this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
        },
        init(id) {
            this.initDataForm();

            console.log(id);
            this.dataForm.id = id;
            if( this.dataForm.id){
                //查询详情 /class/danTemplate/info/{id}
                this.$http({
                    url: this.$http.adornUrl(`/class/msg/info/${this.dataForm.id}`),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        console.log(data)
                        this.dataForm = Object.assign({},this.dataForm, data.danTemplate)
                        this.dataForm.state = Number(this.dataForm.state )||1
                        this.content = this.dataForm.content
                        this.visible = true;

                    }
                })

            }else{
                this.visible = true;
            }
        },
        //上传图片之前async
        beforeEditorUpload(res, file) {
            //显示上传动画
            this.quillUpdateImg = true;
            //  const res1 = await uploadImage()
            // console.log(res1,'=====');
            // this.$emit('before',res, file)
            console.log(res);
            console.log(file);
        },
        // 上传图片成功
        uploadEditorSuccess(res, file) {
            console.log("上传成功")
            // this.$emit('upload',res, file)
            console.log(res, file);
            //拼接出上传的图片在服务器的完整地址
            let imgUrl = res.url;
            let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
            console.log(type);
            // 获取富文本组件实例
            console.log(this.$refs.customQuillEditor);
            console.log(this.$refs.customQuillEditor.$refs.editor.__quill);

            let quill = this.$refs.customQuillEditor.quill;
            console.log(quill);
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片||视频  res.info为服务器返回的图片地址
            if (type == 'mp4' || type == 'MP4') {
                window.jsValue = imgUrl;
                quill.insertEmbed(length, 'video', imgUrl)
            } else {
                quill.insertEmbed(length, 'image', imgUrl)
            }
            // 调整光标到最后
            quill.setSelection(length + 1)
            //取消上传动画
            this.quillUpdateImg = false;
        },
        // 上传(文件)图片失败
        uploadEditorError(res, file) {
            console.log(res);
            console.log(file);
            //页面提示
            this.$message.error('上传图片失败')
            //取消上传动画
            this.quillUpdateImg = false;
        },
        //上传组件返回的结果
        uploadResult: function (res) {
            this.uploadUrlPath = res;
        },
        openContent: function () {
            console.log(this.content)
        },

    },
    created() {

    },
    //只执行一次，加载执行
    mounted() {
        console.log("开始加载")
        // 初始给编辑器设置title
    },
    watch: {
        content(newVal, oldVal) {
            //this.$emit('input', newVal);
            console.log(newVal)
            console.log(oldVal)
        }
    },


}
</script>

<style>
.editor {
    line-height: normal !important;
    height: 400px;
    margin-bottom: 50px;
}

.ql-container {
    height: 335px;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
}

.right-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.container-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px
}

.container-content {
    flex: 1;
}


.flex-container {
    display: flex;
    justify-content: space-between;
    /* 根据需要调整 */
}

.flex-item {
    flex: 1;
    /* 可以根据需要调整比例 */
    margin: 0 10px;
    /* 添加一些间距 */
}

.left-panel,
.right-panel {
    /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
    padding: 10px 0;
}
</style>
